<template>
    <div id="First">
        <Map/>
      <div class="message"></div>
      <div class="new">
          <div class="newContent">
            <img src="../assets/img/new.jpg" alt="喇叭图">
            <span>新品上市</span>
            <span>促销大庆</span>
          </div>
          <div class="timeContent">
            <router-link to="/Newweek" class="timeImg">
              <img :src="arr[0]?arr[0].masterPic:null" alt="">
            </router-link>
            <div class="timeTwo">
              <div class="timeJing">
                <img :src="arr[1]?arr[1].masterPic:null" alt="">
              </div>
              <router-link to="/Superhot" class="timeRe">
                <img :src="arr[2]?arr[2].masterPic:null" alt="">
              </router-link>
            </div>
          </div>
          <div class="message"></div>
          <div class="box">
            <div class="boxContent">
              <img src="../assets/img/今日推荐.jpg" alt="今日推荐">
              <span>今日推荐</span>
            </div>
            <div class="boxCont">
              <img src="../assets/img/绚丽彩妆-1.jpg" alt="绚丽彩妆">
            </div>
            <div class="boxCt">
              <div class="boxCon">
                <img :src="arr1[0]?arr1[0].masterPic:null" alt="">
                <p class="box-con">{{arr1[0]?arr1[0].commodityName:null}}</p>
                <p class="box-cont">￥{{arr1[0]?arr1[0].price:null}}</p>
              </div>
              <div class="boxCon">
                <img :src="arr1[1]?arr1[1].masterPic:null" alt="">
                <p class="box-con">{{arr1[1]?arr1[1].commodityName:null}}</p>
                <p class="box-cont">￥{{arr1[1]?arr1[1].price:null}}</p>
              </div>
              <div class="boxCon">
                <img src="../assets/img/口红1.jpg" alt="">
                <p class="box-con">娇吻玉口红</p>
                <p class="box-cont">￥88</p>
              </div>
            </div>
          </div>
          <div class="message"></div>
          <div class="box">
                <div class="boxCont">
                  <img :src="arr2[0]?arr2[0].masterPic:null" alt="绚丽彩妆">
                </div>
                <div class="boxCt">
                  <div class="boxCon">
                    <img :src="arr2[1]?arr2[1].masterPic:null"  alt="">
                    <p class="box-con">{{arr2[1]?arr2[1].commodityName:null}}</p>
                    <p class="box-cont">￥{{arr2[1]?arr2[1].price:null}}</p>
                  </div>
                  <div class="boxCon">
                    <img :src="arr2[2]?arr2[2].masterPic:null" alt="">
                    <p class="box-con">{{arr2[2]?arr2[2].commodityName:null}}</p>
                    <p class="box-cont">￥{{arr2[2]?arr2[2].price:null}}</p>
                  </div>
                  <div class="boxCon">
                    <img :src="arr2[3]?arr2[3].masterPic:null" alt="">
                    <p class="box-con">{{arr2[3]?arr2[3].commodityName:null}}</p>
                    <p class="box-cont">￥{{arr2[3]?arr2[3].price:null}}</p>
                  </div>
                </div>
          </div>
          <div class="fot"></div>
      </div>
    </div>
</template>

<script>
import Map from './Map';
import axios from 'axios';
export default {
    name:'First',
    data() {
      return {
          arr:[],
          arr1:[],
          arr2:[],
      }
    },
    methods: {
      aaGet(){
      axios.get('/api/small/commodity/v1/commodityList').then(res=>{
        console.log(res.data.result.rxxp.commodityList);
        this.arr = res.data.result.rxxp.commodityList;
        console.log(this.arr);
        this.arr1 = res.data.result.mlss.commodityList;
        console.log(this.arr1);
        this.arr2 = res.data.result.pzsh.commodityList;
        console.log(this.arr2);
      });
      
    }
    },
    mounted() {
      this.aaGet();
  },
  components: { Map },
    
}
</script>
<style scoped>
.message{
  width: 100%;
  height: 0.2rem;
  background-color: #f2f2f2;
}
.new{
  width: 100%;
  height: 3.6rem;
}
.newContent{
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.01rem solid #f2f2f2;
   background-color: #fff;
}
.newContent img{
  width: 0.3rem;
  height: 0.3rem;
  margin: 0.15rem 0.2rem;
  vertical-align: top;
}
.newContent span{
  width: 1.3rem;
  height: 0.3rem;
  font-size: 0.3rem; 
  margin-right: 0.2rem; 
   vertical-align: top;
   color: #4d4d4d;
}
.timeContent{
  width: 100%;
  height: 3rem;
  border-bottom: 0.01rem solid #c3c3c3;
  display: flex;
  justify-content:space-between ;
   background-color: #fff;
}
.timeImg>img{
  width: 3.1rem;
  height: 3rem;
}
.timeTwo{
  width: 4rem;
  height: 3rem;
  border-left: 0.01rem solid #c3c3c3; 
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
 
}
.timeJing,.timeRe{
  width: 100%;
  height: 1.5rem; 
 
}
.timeJing>img{
  width: 3.8rem;
  height: 1.4rem;
  border-bottom: 0.01rem solid #c3c3c3;
}
.timeRe>img{
  width: 3.8rem;
  height: 1.4rem;
}
.box{
  width: 100%;
  height: 6.5rem;
  border-bottom: 0.01rem solid #ccc;
   background-color: #fff;
}
.boxContent{
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.01rem solid #ccc;
}
.boxContent>img{
  width:0.3rem ;
  height: 0.3rem;
  margin: 0.15rem 0.2rem;
  vertical-align: top;
}
.boxContent>span{
  width:1.2rem ;
  height: 0.3rem;
  font-size: 0.3rem;
    vertical-align: top;
   color: #4d4d4d;
}
.boxCont{
  width: 100%;
  height: 3rem;
}
.boxCont>img{
  width: 100%;
  height: 3rem;
}
.boxCt{
  width: 100%;
  height: 1.9rem;
  display: flex;
  justify-content: space-between;
}
.boxCon{
  width: 100%;
  height: 2.75rem;
  text-align: center;
}
.boxCon>img{
  width: 2.2rem;
  height: 1.6rem;
  margin-top: 0.15rem;
}
.boxCon:nth-child(2) img{
  width: 2.28rem;
  height: 1.6rem;
  border-left: 0.01rem solid #ccc;
  border-right: 0.01rem solid #ccc;
}
.box-con{
  width: 2.3rem;
  height: 0.33rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.24rem;
  margin: 0.08rem 0;
}
.box-cont{
  font-size: 0.24rem;
  color: #e83d41;
}  
.fot{
  width: 100%;
  height: 1.5rem;
  background-color: #f2f2f2;
}
</style>